{% extends "PlatBundle::layout.html.twig" %}

{% block title %}区域管理{% endblock %}

{% block css %}
    <link href="{{ asset('assets/css/combo.select.css') }}" rel="stylesheet">
    <style>
        .combo-select{
            margin-bottom: 0;
        }
    </style>
{% endblock %}


{% block top %}
    {{ parent() }}
{% endblock %}


{% block left_body_top %}
    {{ parent() }}
{% endblock %}


{% block left_body %}
    {{ parent() }}
{% endblock %}


    {% block right_body %}
    <div class="page-header">
        <div class="page-right-top">
            <div class="right-top">
                <span class="right-title">区域管理</span>
            </div>
        </div>
        <div class="main-content">
            <div class="mes-content">
                <div class="main-mes-top">
                    <div class="fl">
                        <div class="release-btn fl" style="width:140px;">
                            <div class="train-width" style="width: 96px;">
                                <span class="me-icon fl"></span>
                                <span class="re-text fl">添加新区域</span>
                            </div>
                        </div>
                    </div>

                    <div class="fr">

                        <div class="mes-input fl">
                            <select name="company">
                                <option value="">请输入或选择区域</option>
                                {% for item in data.data %}
                                    <option value="{{ item.name }}">{{ item.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <button class="mes-query-btn fl">查询</button>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="main-mes-content">
                    <div class="al-released fl">区域列表</div>

                    <table class="table" style="table-layout:fixed;">
                        <thead>
                        <tr style="background-color: #f3f9fd;">
                            <th style="width: 10%;" class="center-th">序号</th>
                            <th style="width: 30%;" class="center-th">区域</th>
                            <th class="center-th">操作</th>
                        </tr>
                        </thead>
                        <tbody>


                        </tbody>
                    </table>

                    <div class="page-box">
                        <ul class="pagination">


                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="pop-status opacity"></div>

    {% endblock %}

{% block body %}{% endblock %}

{% block box %}
    <!--添加新属性-->
    <div class="pop-first pop-classify" style="display: none;">
        <div class="pop-title">
            <span class="edit-district-name">添加新区域</span>
            <span class="close close-icon"></span>
        </div>
        <form id="classSubmit">
            <div style="padding: 30px;">
                <div class="com-left fl" style="width: 86px;">区域</div>
                <input type="text" class="com-select com-is-name" name="district" placeholder="请输入区域名称" style="width: 350px;padding: 0 15px;" maxlength="20">

                <input type="hidden" name="id" value="0" >
                <div class="add-mem-box" style="margin:30px 0;overflow: hidden;">
                    <div class="com-left fl"></div>
                    <div class="acc-opera-btn fl mem-btn classify-btn">保存</div>
                    <div class="acc-opera-btn fl mem-cancel">取消</div>
                </div>
            </div>
        </form>
    </div>

{% endblock %}

{% block javascript %}
<script src="{{ asset('assets/js/jquery.combo.select.js') }}"></script>
    {{ parent() }}
<script type="text/javascript">

        SidebarHighlighting(2);

        // 查询条件
        var district_name = "";

        $('select').comboSelect();

        $('body').on('click','.tab-disable', function() {
            var id = $(this).data("id");
            if (confirm('您确定要删除吗？')) {
                $.post("{{ path('api_platform_delete_district') }}",{id:id},function (data) {

                    console.log(data);
                    if(data.errorCode == 0){
                        popStatus(1, data.message, 1, '', true);
                        location.reload();
//                        $("table tbody").empty();
//                        page_times = 0;
//                        getList(1);

                    } else {
                        popStatus(2, data.message, 1, '', true);
                    }

                })
            }
        });

        // 点击 新建属性
        $('.release-btn').on('click', function() {
            $(".edit-district-name").text("添加新区域");
            $("input[name='district']").val("");
            $("input[name='id']").val("0");
            ComMesOpen();
        });

        // 点击 编辑
        $("body").on("click",".tab-edit",function () {
            $(".edit-district-name").text("编辑新区域");
            var id = $(this).data("id");
            var name = $(this).data("name");

            $("input[name='district']").val(name);
            $("input[name='id']").val(id);
            ComMesOpen();

        })


        // 保存 编辑的区域
        $('.classify-btn').on('click', function() {
            //var prame = $('#classSubmit').serializeObject();

            var district = $("input[name='district']").val();
            var id = $("input[name='id']").val();

            if($.trim(district) == ""){
                popStatus(2, '区域名称为空或区域名称不正确', 1, '', true);
                return;
            }

            $.post("{{ path('api_platform_edit_district') }}",{id:id,district:district},function(data){
                console.log(data);
                ComMesClose();
                if(data.errorCode == 0){
                    popStatus(1, data.message, 1, '', true);
                    location.reload();
//                    $("table tbody").empty();
//                    page_times = 0;
//                    getList(1);


                } else {
                    popStatus(2, data.message, 1, '', true);
                }
            })

        });


        //点击取消
        $('.mem-cancel, .close-icon').on('click', function() {
            ComMesClose();
        });

        // 弹框显示函数
        function ComMesClose() {
            $('.pop-status').hide();
            $('.pop-first').hide();
        }

        function ComMesOpen() {
            $('.pop-status').show();
            $('.pop-first').show();
        }

        // 获取区域列表
        var page_times = 0;
        function getList(page){
            page_times++;

            var param = {page:page};

            if($.trim(district_name) != ""){
                param.district_name = district_name;
            }

            $.getJSON("{{ path('api_platform_district_list') }}",param,function(data){
                $("table tbody").empty();
                console.log(data);

                var list_all_count = data.data.search_all_count;
                var allpage = data.data.all_page;

                // 分页样式
                if(page_times == 1 && allpage > 0){
                    pageAction(list_all_count,allpage);
                }

                if(allpage == 0){
                    $(".pagination").empty();
                }

                var item = data.data.info;
                for(var i in item){
                    var html = '';
                    var key = parseInt(i)+1;

                    var list_order_num = parseInt((parseInt(page)-1)*10+key);

                    html += '<tr>';
                    html += '<td class="a-line center-th">'+ list_order_num +'</td>';
                    html += '<td class="center-th">'+ item[i].name +'</td>';
                    html += '<td class="center-th">';
                    html += '<span class="table-opera tab-edit" data-id="'+ item[i].id +'" data-name="'+ item[i].name +'">编辑</span>';
                    //html += '<span class="table-opera tab-disable" data-id="'+ item[i].id +'"> | 删除</span>';
                    html += '</td>';
                    html += '</tr>';

                    $("table tbody").append(html);
                }
            })
        }

        addSearchAction(1);  //4

        //5
        function addSearchAction(page){

            getList(page,district_name);
        }

        //查询
        $(".mes-query-btn").click(function(){

            district_name = $("select[name='company']").val();
            var input_medal = $(".combo-input.text-input").val();

            if($.trim(district_name) == "" && $.trim(input_medal) != ""){
                district_name = input_medal;
            }

            page_times = 0;
            addSearchAction(1);

        })


</script>
{% endblock %}